<template>
    <div class="components_edit_modal">
        <el-dialog title="添加指标" :visible.sync="state" :show-close="true" :close-on-click-modal="false">
            <el-form :model="questionnaireParams"   :rules="rules" ref="questionnaireParams" label-position="right" :close-on-click-modal="false">
                <el-form-item label="指标名称"  prop="itemName">
                    <el-input v-model.trim="questionnaireParams.itemName" placeholder="请输入名称"></el-input>
                </el-form-item>
                <el-form-item label="问卷类型" prop="itemType">
                    <el-radio v-for="questionnaire in questionnaireTypeList"  :key="questionnaire.id" v-model="questionnaireParams.itemType" @change="changeRadioState" :label="questionnaire.id">{{questionnaire.text}}</el-radio>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="typeState" label="最低分" prop="minScore">
                    <el-input-number size="mini" width="60" v-model="questionnaireParams.minScore" :min="0" :max="100">
                    </el-input-number>
                </el-form-item>
                <el-form-item v-if="typeState" label="最高分" prop="maxScore">
                    <el-input-number size="mini" width="60" v-model="questionnaireParams.maxScore" :min="0" :max="100">
                    </el-input-number>
                </el-form-item>
                <hr>

                <el-form-item v-if="typeState" label="指标说明" class="lineblock textareaBox">
                    <el-button style="margin:10px 0 " size="mini" type="primary" icon="el-icon-plus" @click="addQuestionnaireDescription">添加指标说明</el-button>
                    <span class="itemDescription_tit">添加指标项说明，最多添加四项</span>
                    <div v-for="(item, index) in questionnaireParams.itemDescription" class="por">
                        <el-input  v-model.trim="questionnaireParams.itemDescription[index]" type="textarea"  placeholder="请输入指标说明"></el-input>
                        <a href="javascript:void(0);" @click="remove(index)" class="btn_Description_Del">删除</a>
                    </div>

                 </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" size="small" @click="addQuestionnaire('questionnaireParams')">确 定</el-button>
                <el-button size="small" @click="state = false">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {enums} from '@/constant'
    export default {
        components: {

        },
        data() {
            return {
                 state: false,
                 rules: {
                    itemName: [
                        { required: true, message: '请输入问卷项名称', trigger: 'blur',type:"string"},
                    ],
                    maxScore: [
                        { required: true, message: '请输入最大值', trigger: 'blur',type:"number"},
                    ],
                    minScore: [
                        { required: true, message: '请输入最小值', trigger: 'blur',type:"number"},
                    ],
                 },
                questionnaireParams: {
                    questionnaireId:null,
                    itemType:0,
                    itemName:null,
                    maxScore:null,
                    minScore:null,
                    itemDescription:[""],
                },
                typeState:true,
                questionnaireTypeList:enums.QUESTIONNAIRE_ITEM_TYPE,

            }
        },
        created() {

        },
        mounted() {},
        methods: {
            showDialog(id){
                if(this.$refs['questionnaireParams']!==undefined){
                    this.$refs['questionnaireParams'].resetFields();
                }
                this.typeState = true;
                this.questionnaireParams.itemDescription=[""];
                this.questionnaireParams.questionnaireId = id;
                this.state = true;
            },
            // 新建专业
            addQuestionnaire(questionnaireName) {
                let self = this;
                this.$refs['questionnaireParams'].validate((valid) => {
                    if (valid) {
                        let url = api.questionnaire.saveQuestionnaireItem;
                        this.axios.post(url,self.questionnaireParams)
                        .then((response) => {
                            if (response.data.success) {
                                self.$message({
                                    type: 'success',
                                    message: response.data.msg,
                                });
                                self.$parent.$refs.questionnaireTable.$emit('vuetable:refresh');
                                self.state = false;
                            } else {
                                self.$message.error(response.data.msg);
                            }
                            
                        })
                    } else {
                        return false;
                    }
                });
            },
            addQuestionnaireDescription(){
                if(this.questionnaireParams.itemDescription.length ==4){
                    this.$message({
                                    type: 'warning',
                                    message: "指标详细说明不能多于四项",
                                });
                    return;
                }
                this.questionnaireParams.itemDescription.push("");
            },
            remove(index){
                let itemDescriptionCurrent = [];
                let itemDescription = this.questionnaireParams.itemDescription;
                for(let i=0;i<itemDescription.length;i++){
                    if(i != index){
                        itemDescriptionCurrent.push(itemDescription[i]);
                    }
                }
                this.questionnaireParams.itemDescription = itemDescriptionCurrent;
            },
            changeRadioState(value){
                if(value == 1){
                    this.typeState = false;
                }else{
                    this.typeState = true;
                }
            }

        }
    };
</script>
<style scoped>
.itemDescription_tit{
    /* padding-left: 128px; */
    padding-left: 10px;
    font-size: 12px;
    color: #999;
}
.por{
    position: relative;
    margin-bottom: 10px;
}
.btn_Description_Del{
    position: absolute;
    top: 0;
    right: -40px;
    color: #00BBBD;
}
</style>